<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>JD-index</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 版心容器 在320-640宽度自适应 start -->
    <div class="jd_container">
        <!-- 顶部搜索 start -->
        <header class="jd_search">
            <div class="jd_search_box">
                <a href="#" class="img_logo">
                    <span class="icon_logo_img"></span>
                </a>
                <form action="#">
                    <span class="icon_search"></span>
                    <input type="text" placeholder="请输入关键词">
                </form>
                <a href="#" class="login">登录</a>
            </div>
        </header>
        <!-- 顶部搜索 end -->
        <!-- 轮播图 start -->
        <div class="jd_banner">
            <ul>
                <li><a href="#"><img src="./images/banner/6.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner/5.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner/6.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/banner/1.jpg" alt=""></a></li>
            </ul>
            <ul>
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 轮播图 end -->
        <!-- 导航栏 start -->
        <nav class="jd_nav">
            <ul class="clearfix"> <!--清除上方的浮动，使ul具有高度-->
                <li>
                    <a href="#">
                        <img src="./images/nav/1.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/2.png" alt="">
                        <p>数码电器</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/3.png" alt="">
                        <p>京东服饰</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/4.png" alt="">
                        <p>京东生鲜</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/5.png" alt="">
                        <p>京东到家</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/6.png" alt="">
                        <p>充值缴费</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/7.png" alt="">
                        <p>9.9元拼</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/8.png" alt="">
                        <p>领券</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/9.png" alt="">
                        <p>赚钱</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav/10.png" alt="">
                        <p>PLUS会员</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- 导航栏 end -->
        <!-- 产品区块 start -->
        <div class="jd_product">
            <!-- 秒杀 start -->
            <section class="jd_proBox">
                <div class="pro_tit nb">
                    <div class="f_left">
                        <span class="sk_icon"></span>
                        <span class="sk_text">掌上秒杀</span>
                        <div class="sk_time">
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="f_right">
                        <a href="#" class="m_r10">更多></a>
                    </div>
                </div>
                <div class="pro_con">
                    <ul class="sk_product clearfix"> <!--清除上方的浮动，使ul具有高度-->
                        <li>
                            <a href="#"><img src="./images/goods/1.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/goods/2.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/goods/3.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/goods/4.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/goods/5.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/goods/6.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/goods/7.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/goods/8.jpg" alt=""></a>
                            <p class="now_price">￥12.00</p>
                            <p class="old_price">￥20.00</p>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 秒杀 end -->
            <!-- 京东自营 start -->
            <section class="jd_proBox">
                <div class="pro_tit"><h3>京东自营</h3></div>
                <div class="pro_con clearfix">
                    <a href="#" class="w_p50 f_left b_right"><img src="./images/goods/1.jpg" alt=""></a>
                    <a href="#" class="w_p50 f_right b_bottom"><img src="./images/goods/2.jpg" alt=""></a>
                    <a href="#" class="w_p50 f_right "><img src="./images/goods/3.jpg" alt=""></a>
                </div>
            </section>
            <!-- 京东自营 end -->
            <!-- 京东超市 start -->
            <section class="jd_proBox">
                <div class="pro_tit"><h3>京东超市</h3></div>
                <div class="pro_con clearfix">
                    <a href="#" class="w_p50 f_right b_left"><img src="./images/goods/1.jpg" alt=""></a>
                    <a href="#" class="w_p50 f_left b_bottom"><img src="./images/goods/2.jpg" alt=""></a>
                    <a href="#" class="w_p50 f_left "><img src="./images/goods/3.jpg" alt=""></a>
                </div>
            </section>
            <!-- 京东超市 end -->
            <!-- 京东热门 start -->
            <section class="jd_proBox">
                <div class="pro_tit"><h3>京东热门</h3></div>
                <div class="pro_con clearfix">
                    <a href="#" class="w_p50 f_left b_right"><img src="./images/goods/1.jpg" alt=""></a>
                    <a href="#" class="w_p50 f_right b_bottom"><img src="./images/goods/2.jpg" alt=""></a>
                    <a href="#" class="w_p50 f_right "><img src="./images/goods/3.jpg" alt=""></a>
                </div>
            </section>
            <!-- 京东热门 end -->
        </div>
        <!-- 产品区块 end -->
    </div>
    <!-- 版心容器 在320-640宽度自适应 end -->
</body>
<script src="./js/common.js"></script>
<script src="./js/index.js"></script>
</html>